<template>
    <div class="panel" style="width: 300px;">
        <h3>参数查询</h3>
        <div class="countnumber">
            <el-text class="mx-1">表格数据量：</el-text>
            <el-text class="mx-1">{{ store.getters.tablelength }}</el-text>
        </div>
        <div style="margin-top: 10px;">
            <el-date-picker v-model="starttime" type="datetime" placeholder="开始时间" :default-time="defaultStartTime"
                style="width: 100%;" />
        </div>
        <div style="margin-top: 10px;">
            <el-date-picker v-model="endtime" type="datetime" placeholder="结束时间" :default-time="defaultEndTime"
                style="width: 100%;" align="right" />
        </div>
        <div style="margin-top: 10px;">
            <el-select v-model="event" placeholder="事件" clearable>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="search" style="margin-top: 10px;">
            <el-input v-model="search" placeholder="输入域名" style="width: 100%;">
                <template #append>
                    <el-button :icon="Plus" @click="addItem" style="background-color: #409EFF; color: aliceblue; border: #409EFF; border-top-left-radius: 0; border-bottom-left-radius: 0;" />
                </template>
            </el-input>
        </div>
        <div class="list" style="margin-top: 10px;">
            <div class="item" v-for="item in list" :key="item.id" style="display: flex; align-items: center; justify-content: space-between;">
                <p>{{ item.name }}</p>
                <el-button type="danger" :icon="Delete" @click="deleteItem(item.id)" />
            </div>
        </div>
        <el-button type="primary" :icon="Search" style="margin-top: 10px;" @click="loadTableData()" :loading="loading">查询</el-button>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Plus, Search, Delete } from '@element-plus/icons-vue'
import { v4 as uuidv4 } from 'uuid' // 使用uuid生成唯一标识符
import { useStore } from 'vuex'

const store = useStore()
const starttime = ref()
const endtime = ref()
const event = ref()
const search = ref()
const list = ref([])
const loading = ref(false)

const defaultStartTime = new Date(2000, 0, 1, 0, 0, 0)
const defaultEndTime = new Date(2000, 0, 1, 23, 59, 59)

const options = [
    {
        value: 0,
        label: '页面访问',
    },
    {
        value: 1,
        label: '添加line',
    },
]

// 添加新项目到列表中
const addItem = () => {
    if (search.value.trim() !== '') {
        list.value.push({ id: uuidv4(), name: search.value.trim() })
        search.value = ''
    }
}

// 从列表中删除项目
const deleteItem = (id: string) => {
    list.value = list.value.filter(item => item.id !== id)
}

// 格式化时间为 YYYY-MM-DD HH:mm:ss
const formatDate = (date: Date) => {
    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
        return '';
    }
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const loadTableData = async () => {
    loading.value = true
    const params = {
        beginTime: formatDate(starttime.value),
        endTime: formatDate(endtime.value),
        event: event.value,
        list: list.value.map(item => item.name) // 只传递域名
    };
    await store.dispatch('getTableData', params)
    loading.value = false
}
</script>



<style lang="less" scoped>
.panel {
    height: 100%;
    border: 1px solid var(--el-menu-border-color);
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    padding: 10px;

    &>h3 {
        text-align: center;
        line-height: 40px;
    }

    &>.list{
        min-height: 200px;
        margin-top: 10px;
        border: 1px solid var(--el-menu-border-color);
        border-radius: 3px;
        flex-grow: 1;
        padding: 10px;
        overflow-y: auto;


        &>.item{
            width: 100%;
            margin-bottom: 10px;
            display: flex;
            p{
                flex-grow: 1;
                border: 1px solid var(--el-menu-border-color);
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
                padding-left: 10px;
                line-height: 32px;
                font-size: inherit;
                color: var(--el-input-text-color, var(--el-text-color-regular));
            }
            .el-button{
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }

    
}
</style>